import React, { Component } from 'react';
import { Icon} from 'antd';
import { time} from '../../utils'
import * as API from '../../api/api'
import './index.less'

export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user:{}
        }
    }
    componentWillReceiveProps(props){
        console.log(props)
    }
    componentDidMount(){
        console.log(this.props)
    }
    //关注
    toggleFollow=(userId)=>{
        API.toggleFollow(userId).then(res => {
            if (res.data.code === 1) {
                let {isFollow,count} = res.data;
                this.props.updateFollow({
                    isFollow,
                    count,
                    userId
                })
            }
        })
    }
    render() {
        let {user,commentCount} = this.props;
        return (
            <div className="user-card-content">
                {/* <div className="user-card-arrow"></div> */}
                <div className="user-card-inner">
                    <div className="user-card-inner-content clearfix">
                        <div className="user-baseinfo">
                            <div className="user-avatar">
                                <img src={user.avatar} alt="" />
                            </div>
                            <div className="names">
                                <div className="username">{user.username}</div>
                                <p className="join-time">最后发帖于{time(user.last_comment_time)}</p>
                            </div>
                        </div>
                        <div className="user-card-section">
                            <div className="number_box">
                                <a className="number_item" href="">
                                    <div className="number_item_name">文章</div>
                                    <strong className="number_item_value">{user.article_count}<i className="num-unit"> 篇</i></strong>
                                </a>
                                <a className="number_item" href="">
                                    <div className="number_item_name">关注者</div>
                                    <strong className="number_item_value">{user.follower_count}<i className="num-unit"> 人</i></strong>
                                </a>
                                <a className="number_item" href="">
                                    <div className="number_item_name">本文评论</div>
                                    <strong className="number_item_value">{commentCount}<i className="num-unit"> 次</i></strong>
                                </a>
                            </div>
                        </div>
                        <div className="user-card-section">
                            <div className="following">
                                <button className={user.is_follow?'btn active':'btn'} onClick={()=>{this.toggleFollow(user._id)}}>
                                    {user.is_follow?'已关注':(<span><Icon type="plus" /> 关注</span> )} 
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
        
    }
}